<template>
	<view class="main">
		<view class="card_box">
			<view class="my_card">我的银行卡<text class="card_count">（共{{bankCardLists.length}}张）</text></view>
			<view v-for="(item,index) in bankCardLists" :key="index" class="card">
				<view class="bank_icon"><image src="../../static/images/card.png" mode="scaleToFill"></image></view>
				<view class="bank_msg">
					<view class="bank_name">{{item.bankName}}</view>
					<view class="bank_card_no">{{getIdCardNo(item.bankCardNo)}}</view>
				</view>
				<view @click="unBind(item)" style="border: 1px solid #fff;border-radius: 10rpx;display: flex;justify-content: center;align-items: center;padding: 10rpx;">
					<text style="color: #FFFFFF;font-size: 26rpx;">解除绑定</text>
				</view>
			</view>
			<view class="card add_card" @click="addBank">
				<view class="add_icon"> + </view>
				<view class="add_txt">
					添加银行卡
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onShow:function(){
			this._queryBankCard()
			this._getIndividualMemberInfo()
		},
		data(){
			return{
				bankCardLists: [],
				memberInfo: {}
			}
		},
		computed: {
			getIdCardNo(str) {
				return function(str) {
					return str.replace(/^(.{6})(?:\d+)(.{4})$/,"$1****$2");
				}
			}
		},
		methods:{
			_getIndividualMemberInfo() {
				let bizUserId = uni.getStorageSync('bizUserId')
				uni.request({
					method: 'POST',
					url: 'https://wlreaohs.xiaomy.net/common/biz/cloud/member/getIndividualMemberInfo',
					data: {
						bizUserId: bizUserId
					},
					header: { 'content-type': 'application/json' },
					success: (res) => {
						if(res.data.code == 0) {
							this.memberInfo = res.data.data.memberInfo
						}
					},
					fail: (err) => {
						uni.hideLoading()
						console.log(err)
					}
				})
			},
			addBank() {
				if(!this.memberInfo.isSignContract) {
					uni.showModal({
						title: '操作提示',
						content: '您未签约，完成绑卡前需签约！',
						showCancel: true,
						confirmText: '去签约',
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									url: './toSign'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else {
					uni.navigateTo({
						url: './amount/bindBank'
					})
				}
			},
			unBind(obj) {
				let _that = this;
				uni.showModal({
					title: '温馨提示',
					content: `确定要解绑吗？`,
					showCancel: true,
					confirmText: '确定',
					success: function (res) {
						if (res.confirm) {
							let bizUserId = uni.getStorageSync('bizUserId')
							uni.showLoading({
								title: '解绑中...'
							})
							uni.request({
								method: 'POST',
								url: 'https://wlreaohs.xiaomy.net/common/biz/cloud/member/unbindBankCard',
								data: {
									bizUserId: bizUserId,
									cardNo: obj.bankCardNo
								},
								header: { 'content-type': 'application/json' },
								success: (res) => {
									if(res.data.code == 0) {
										uni.showToast({
											title: '解绑成功~',
											icon: 'none'
										})
										uni.hideLoading()
										_that._queryBankCard()
									} else {
										uni.showToast({
											title: '解绑失败~',
											icon: 'none'
										})
										uni.hideLoading()
									}
								},
								fail: (err) => {
									uni.hideLoading()
									console.log(err)
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			_queryBankCard() {
				uni.showLoading({
					title: '加载中...'
				})
				let bizUserId = uni.getStorageSync('bizUserId')
				uni.request({
					method: 'POST',
					url: 'https://wlreaohs.xiaomy.net/common/biz/cloud/member/queryBankCard',
					data: {
						bizUserId: bizUserId
					},
					header: { 'content-type': 'application/json' },
					success: (res) => {
						console.log(res)
						if(res.data.code == 0) {
							if(res.data.data.bindCardList == null) {
								this.bankCardLists = []
							} else {
								this.bankCardLists = res.data.data.bindCardList
							}
							uni.hideLoading()
						} else {
							uni.hideLoading()
						}
					},
					fail: (err) => {
						uni.hideLoading()
						console.log(err)
					}
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #f8f8f8;
	}
</style>
<style lang="scss" scoped>
	.main{
		padding: 24rpx;
	}
	.card_box{
		background-color: #FFF;
		box-shadow: 0px 2px 8px 0px #ededed;
		border-radius: 12rpx;
		padding: 24rpx;
		.card{
			// height: 150rpx;
			border-radius: 12rpx;
			padding: 30rpx 24rpx;
			background-color: #0F6AF6;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 24rpx;
			.bank_icon{
				width: 100rpx;
				height: 100rpx;
				text-align: center;
				// margin-right: 36rpx;
				background-color: #FFF;
				border-radius: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					width: 64rpx;
					height: 64rpx;
				}
			}
			.bank_msg{
				width: 340rpx;
				.bank_name,.bank_card_no{
					color: #FFF;
					font-weight: 600;
					font-size: 33rpx;
					line-height: 60rpx;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
				}
				.bank_card_no{
					opacity: 0.6;
				}
			}
			
			&.add_card{
				justify-content: center;
				align-items: center;
				background: #f8f8f8;
				.add_icon{
					height: 100rpx;
					width: 100rpx;
					line-height: 100rpx;
					background-color: #0F6AF6;
					border-radius: 50%;
					text-align: center;
					font-size: 50rpx;
					font-weight: 600;
					color: #FFF;
					margin-right: 24rpx;
				}
			}
		}
		.my_card{
			font-weight: 600;
			margin-bottom: 24rpx;
			.card_count{
				font-size: 26rpx;
				color: #999;
			}
		}
	}
</style>
